<template>
    <div class="record-account">
        <div class="opers">
            <el-button type="blue" :loading="loading" @click="addAction">添加账号</el-button>
        </div>
        <el-table class="mt-20" :data="dataList" style="width: 100%" v-loading="loading">
            <el-table-column prop="accountname" label="账号"></el-table-column>
            <el-table-column prop="name" label="姓名"></el-table-column>
            <el-table-column prop="phone" label="手机"></el-table-column>
            <el-table-column prop="email" label="邮箱"></el-table-column>
            <el-table-column label="操作" width="220">
                <template slot-scope="scope">
                    <div class="nowrap">
                        <el-button
                            type="green"
                            @click="deleteAction(scope.row, scope.$index)"
                            :disabled="!$store.getters.hasEditPermission"
                            >删除</el-button
                        >
                    </div>
                </template>
            </el-table-column>
        </el-table>
        <el-pagination
            v-if="total > 0"
            class="text-right mt-20 mr-20"
            @current-change="handleCurrentChange"
            :current-page="currentPage"
            :page-size="pageSize"
            layout="prev, pager, next, total, jumper"
            :total="total"
        >
        </el-pagination>
        <!-- 添加 start -->
        <el-dialog
            title="添加账号"
            :visible.sync="newModalVisible"
            width="620px"
            :close-on-click-modal="false"
            :close-on-press-escape="false"
            destroy-on-close
            append-to-body
        >
            <New
                ref="newData"
                :homeData="activeData"
                @success="submitSuccessAction"
                @fail="adding = false"
                @submitting="adding = true"
                @cancel="newModalVisible = false"
            >
            </New>
            <div slot="footer">
                <el-button
                    type="primary"
                    :loading="adding"
                    @click="submitAction"
                    :disabled="!$store.getters.hasEditPermission"
                    >提交</el-button
                >
            </div>
        </el-dialog>
        <!-- 添加 end -->
    </div>
</template>
<script>
import { mapState } from "vuex"
import New from "@/components/census/record/RecordAccountNew.vue"
export default {
    name: "RecordAccount",
    props: {
        activeData: {
            type: Object,
            default() {
                return null
            },
        },
    },
    computed: {
        ...mapState(["scale"]),
    },
    components: {
        New,
    },
    data() {
        return {
            total: 0,
            currentPage: 1,
            pageSize: 10,
            loading: false,
            dataList: [],
            newModalVisible: false,
            adding: false,
            deleting: false,
        }
    },
    methods: {
        getData(page) {
            this.loading = true
            this.$get("/systemsetup/systemsetup/userListPage", {
                page: page,
                limit: this.pageSize,
                queryhomeId: this.activeData.id,
            }).then(
                (res) => {
                    this.loading = false
                    let data = res.data
                    this.currentPage = page
                    this.total = data.totalSize
                    this.dataList = data.Items
                },
                (err) => {
                    this.loading = false
                    this.$message.error(err.msg)
                }
            )
        },
        addAction() {
            this.newModalVisible = true
        },
        deleteAction(item, index) {
            this.showConfirm("确定删除该帐号？", () => {
                this.deleting = true
                this.$post("/systemsetup/systemsetup/userDelete", {
                    id: item.id,
                }).then(
                    (res) => {
                        this.deleting = false
                        this.$message.success("删除成功")
                        this.dataList.splice(index, 1)
                        // this.getData(this.currentPage)
                    },
                    (err) => {
                        this.deleting = false
                        this.$message.error(err.msg)
                    }
                )
            })
        },
        handleCurrentChange(page) {
            this.getData(page)
        },
        submitAction() {
            this.$refs.newData.submitAction()
        },
        submitSuccessAction() {
            this.adding = false
            this.newModalVisible = false
            this.getData(this.currentPage)
        },
    },
    created() {
        this.getData(1)
    },
}
</script>
